<div class="compute-modal modal fade in" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">x</button>
                <i class="header-icon gme-icon"></i>
                <span>Compute Overview</span>
            </div>
            <div class="modal-body">
                <% if (tabs.length > 1) { %>
                <div role="tabpanel">
                    <ul class="nav nav-tabs" role="tablist">
                    <% tabs.forEach((tab, i) => { %>
                        <li role="presentation" <%= i === 0 ? 'class="active"' : '' %>><a href="#<%= tab.id %>-dashboard-container" data-toggle="tab" role="tab"><%= tab.name %></a></li>
                    <% }); %>
                    </ul>
                    <div class="tab-content">
                    <% tabs.forEach((tab, i) => { %>
                        <div role="tabpanel" class="tab-pane <%= i === 0 ? 'active' : '' %>" id="<%= tab.id %>-dashboard-container"></div>
                    <% }); %>
                    </div>
                </div>
                <% } else if (tabs.length === 1) { %>
                <div class="container-fluid" id="<%= tabs[0] %>-dashboard-container"></div>
                <% } else { %>
                    <div class="no-dashboards">No compute backends enabled.</div>
                <% } %>
            </div>
        </div>
    </div>
</div>
